<template>
  <div>
    <group>
      <datetime v-model="date" title="日期" :end-date="today"></datetime>
    </group>
    <card :header="{title: '总费用: ' + electric}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{electric}}</span>
          <br/>
          空调用电
        </div>
        <div class="vux-1px-r">
          <span>{{cold}}</span>
          <br/>
          冷热站
        </div>
        <div class="vux-1px-r">
          <span>{{airEnd}}</span>
          <br/>
          空调末端
        </div>
        <div>
          <span>{{distribute}}</span>
          <br/>
          分体式空调器
        </div>
      </div>
    </card>
    <div id="container3" style="width: 100%;height:280px;"></div>
  </div>
</template>

<script>
export default {
  name: 'EnergyAir',
  data () {
    return {
      date: '',
      today: '',
      electric: '',
      cold: '',
      airEnd: '',
      distribute: '',
      isLoaded: false,
      type: '1'
    }
  },
  methods: {
    init () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      month < 10 && (month = '0' + month)
      day < 10 && (day = '0' + day)
      this.today = this.date = `${year}-${month}-${day}`
    },
    search (e) {
      var type = typeof e === 'string' ? e : e.target.title
      this.type = type
      var str = 't=' + type + '&d={buildid:320101A068,date:' + this.date + '}'
      var option = {
        title: {
          text: '空调能耗(kW)',
          textStyle: {
            fontSize: 13
          }
          // left: 'center'
        },
        grid: {
          // x:'5%',
          y: '13%',
          x2: '5%',
          y2: '10%'
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross'
        //   },
        //   textStyle: {
        //     align: 'left'
        //   }
        // },
        legend: {
          // left: 'left',
          itemWidth: 35, // 标志图形的长度
          itemHeight: 10,
          data: ['今日'],
          textStyle: {
            fontSize: 12
          }
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     magicType: {type: ['line', 'bar']},
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // name: 'x',
          // splitLine: {show: false},
          // axisLabel: { interval: 11 },
          data: []
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        yAxis: {
          type: 'value'
          // scale: true,
          // axisLabel: {
          //   formatter: '{value}kW'
          // }
        },
        series: [{
          name: '今日',
          type: 'line',
          data: [],
          connectNulls: true,
          lineStyle: {
            normal: {}
          }
          // data:[11, 11, 15, 13, 12, 13, 10],
          // markPoint: {
          //   data: [
          //     {type: 'max', name: '最大值'},
          //     {type: 'min', name: '最小值'}
          //   ],
          //   symbolSize: 30
          // }
        }]
      }
      this.ajax('/ystApp/AirCondition', str).then(res => {
        var bean = res.acqtbeanList
        this.electric = bean[0].dayvalue
        this.cold = bean[1].dayvalue
        this.airEnd = bean[2].dayvalue
        this.distribute = bean[3].dayvalue
        var list = res.acqhbeanList
        var xList = []
        var yList = []
        for (var i of list) {
          xList.push(i.starthour.slice(11, 16))
          yList.push(i.hourvalue)
        }
        option.xAxis.data = xList
        option.series[0].data = yList
        window.myChart.setOption(option)
      })
    }
  },
  created () {
    this.init()
  },
  mounted () {
    window.myChart = window.echarts.init(document.getElementById('container3'), 'light')
    this.search('1')
  },
  watch: {
    date () {
      if (!this.isLoaded) {
        this.isLoaded = true
        return
      }
      this.search(this.type)
    }
  }
}
</script>

<style scoped>

</style>
